<template>
	<view class="content">
		<view class="header box d-jc-sb">
			<view class="header-left box d-ai-c"  @tap="jumpselectcity">
				<image class="header-image" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/images/index/dingwei@2x.png" mode=""></image>
				<view class="ml-1">
					{{city}}
				</view>
			</view>
			<view class="header-right box d-ai-c d-jc-c" @tap="search">
				<image class="ml-2" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/icon/search.png" mode=""></image>
				<view class="">
					请输入要搜索的医院名称
				</view>
			</view>
		</view>
		<!--swiper-->
		<view class="swiper">
			<swiper class="swiper" 
					:indicator-dots="indicatorDots" 
					:autoplay="autoplay" 
					:interval="interval" 
					:duration="duration"
					:circular='true'>
				<!-- <swiper-item>
					<view class='swiper-item' style="background:url(https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/images/index/tianqi@2x.png)" @tap="openwether"></view>
				</swiper-item> -->
				<swiper-item>
					<view class='swiper-item' style="background:url(https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/banner2%402x.png)" @tap="jumpxiangbanmall"></view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 服务内容 -->
		<view class="server box d-jc-sb">
			<view class="server-list" @tap="Jumpoutpatient(1)">
				<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/images/index/pbmz@2x.png" mode=""></image>
				<view class="">
					门诊陪伴
				</view>
			</view>
			<view class="server-list" @tap="Jumpoutpatient(2)">
				<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/images/index/pbxt@2x.png" mode=""></image>
				<view class="">
					血透门诊陪伴
				</view>
			</view>
			<view class="server-list" @tap="Jumpoutpatient(3)">
				<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/images/index/dpy@2x.png" mode=""></image>
				<view class="">
					代配药
				</view>
			</view>
		</view>
		<!-- 医院表头 -->
		<view class="doc-header box d-ai-c d-jc-sb mt-3">
			<view class="">
				附近医院
			</view>
			<view class="" @tap="search">
				更多
			</view>
		</view>
		<!-- 医院列表 -->
		<scroll-view scroll-y="true" @scrolltolower='nextPage()' :style="{height:height+'px'}">
		<view v-if="!isNull" class="mt-3">
			<view class="doc-list box" v-for="(item,index) in gethospitallist" @tap="Jumpopc(item.name,item.id,item.type)">
				<image :src="item.image" mode=""></image>
				<view class="list-right ml-1">
					<view class="box d-ai-c">
						<view>{{item.name}}</view>
						<!-- <view class="public ml-1">公立</view> -->
						<!-- <view class="private ml-1">民营</view> -->
					</view>
					<view class="mt-1">
						{{item.address2}}
					</view>
					<view class="mt-1 box d-ai-c">
						{{item.distanceUm/1000}}km
						<!-- <view class="public" v-if="item.nature==1">公立医院</view>
						<view class="public" v-if="item.nature==2">民营医院</view> -->
						<!-- <view class="private ml-1" v-if="item.grade!=0">三级甲等</view> -->
					</view>
				</view>
			</view>
		</view>
		<view v-if="isNull" class="order_null">
			<image src="../../static/11.png"></image>
			<!-- <text>暂无医院列表~</text> -->
			<!-- <button class="btn-shop-list">去逛逛</button> -->
		</view>
		</scroll-view>
		<wybpopup ref="popup" type='center' :width="580" :height="520" :radius="15">
			<view class="popup-header box d-ai-c">
				<view class="flex-8">
					选择您要预约的服务
				</view>
				<image @tap="close" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/images/index/guanbi@2x (1).png" mode=""></image>
			</view>
			<view class="typelist box d-jc-c d-ai-c" @tap="jumpserver(1)"  v-if="type!=3">
				<image src="../../static/mzpb2@2x.png" mode=""></image>
				<view class="ml-1">
					门诊陪伴
				</view>
			</view>
			<view class="typelist box d-jc-c d-ai-c" @tap="jumpserver(2)" v-if="type!=3">
				<image src="../../static/xtmz2@2x.png" mode=""></image>
				<view class="ml-1">
					血透门诊陪伴
				</view>
			</view>
			<view class="typelist box d-jc-c d-ai-c" @tap="jumpserver(3)" v-if="type==2||type==3">
				<image src="../../static/dpy2@2x.png" mode=""></image>
				<view class="ml-1">
					代配药门诊陪伴
				</view>
			</view>
		</wybpopup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import QQMapWX from '../../uni_modules/qqmap-wx-jssdk.js'
	import wybpopup  from '@/components/wyb-popup/wyb-popup.vue'
	export default {
		components: {
		          wybpopup,
		       },
			   computed: mapState(['loginState', 'userInfo']),
		data() {
			return {
				hospitalname:'',//医院名称
				indicatorDots: false,
				autoplay: true,
				interval: 5000,
				duration: 500,
				longitude:'',
				latitude:'',
				gethospitallist:'', //医院展示列表
				pageNum:1,
				pageSize:10,
				hospitalid:'',
				type:'',
				city:'',
				hasNextPage:false,
				height:500,
				isNull:false
			}
		},
		onLoad() {
			this.getlocation()
			
		},
		onShow() {
			this.handleAdress()
		},
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					this.height = res.windowHeight - uni.upx2px(100)
				}
			})
		},
		methods: {
			//地址监听
			handleAdress() {
				uni.$on("handleAddress", res => {
					this.city = res.parameter.name
					this.hospitallist()
					// 清除监听
					uni.$off('handleAddress');
				})
			},
			jumpselectcity(){
				uni.navigateTo({
					url:'locateadress'
				})
			},
			jumpxiangbanmall(){
				wx.navigateToMiniProgram({
				        appId: 'wxfcc8f6c1bb650390',  //appid
				        path: '/pages/index/index',//path
				        extraData: {  //参数
				          foo: 'bar'
				        },
				        envVersion: 'release', //开发版develop 开发版 trial   体验版 release 正式版 
				        success(res) {
				          console.log('成功')
				          // 打开成功
				        }
				      })
			},
			openwether(){
				let url = encodeURIComponent('https://t.pae.baidu.com/s?s=bai-pg3bzs')
					uni.navigateTo({
						url:'../mine/webView/webView?url='+url
					})
				
			},
			getMapAddress() {
							const tMap = new QQMapWX({
								key: 'MB7BZ-EX4EO-4PXW2-STJYI-KJRV2-LOBQE' //开发者密钥
							});
							tMap.reverseGeocoder({
								location: {
									latitude: this.latitude,
									longitude: this.longitude
								},
								success: (res) =>{
									console.log("解析地址成功", res);
									console.log("当前地址：", res.result.address_component.city);
									this.city = res.result.address_component.city
									uni.setStorageSync("city",this.city)
									this.hospitallist()
								},
								fail: function(res) {
									uni.showToast({
										title: '定位失败',
										duration: 2000,
										icon: "none"
									})
									console.log(res);
								},
								complete: function(res) { //无论成功失败都会执行
									
								}
							})
							// //使用 uni.getLocation获取用户所在经纬度
							// uni.getLocation({
							// 	type: 'gcj02',
							// 	success: (res) => {
							// 		console.log("获取经纬度成功");
							// 		this.latitude = res.latitude;
							// 		this.longitude = res.longitude;
							// 	},
							// 	fail: () => {
							// 		console.log("获取经纬度失败");
							// 	},
							// 	complete: () => {
							// 		// 使用腾讯sdk的reverseGeocoder方法 解析经纬度
							// 		tMap.reverseGeocoder({
							// 			location: {
							// 				latitude: this.latitude,
							// 				longitude: this.longitude
							// 			},
							// 			success: (res) =>{
							// 				console.log("解析地址成功", res);
							// 				console.log("当前地址：", res.result.address_component.city);
							// 				this.city = res.result.address_component.city
							// 				uni.setStorageSync("city",this.city)
							// 				this.hospitallist()
							// 			},
							// 			fail: function(res) {
							// 				uni.showToast({
							// 					title: '定位失败',
							// 					duration: 2000,
							// 					icon: "none"
							// 				})
							// 				console.log(res);
							// 			},
							// 			complete: function(res) { //无论成功失败都会执行
											
							// 			}
							// 		})
							// 	}
							// })
						},

			close(){
				this.$refs.popup.hide()
			},
			jumpserver(type){
				uni.navigateTo({
					url:'outpatientServert?name='+this.hospitalname+'&id='+this.hospitalid+'&drugtype='+this.type+'&type='+type
				})
				this.close()
				
			},
			Jumpopc(name,id,type){
				if(this.loginState){
					this.hospitalname = name
					this.hospitalid = id
					uni.navigateTo({
						url:'outpatientServer?contraststype='+type+'&name='+this.hospitalname+'&id='+this.hospitalid+'&drugtype='+this.type
					})
				}else{
					uni.navigateTo({
						url:"../mine/author"
					})
				}
				
				
				// this.type = type
				// this.$refs.popup.show()
				// this.audioplay('https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/audio/2.mp3')
			},
			search(){
				uni.navigateTo({
					url:'hospitalList?longitude='+this.longitude+'&latitude='+this.latitude
				})
			},
			getlocation(){
				let _this = this
				setTimeout(function() {
					uni.getLocation({
					    type: 'gcj02',
					    success:  function(res) {
					        console.log('当前位置的经度：' + res.longitude);
					        console.log('当前位置的纬度：' + res.latitude);
							_this.longitude = res.longitude
							_this.latitude = res.latitude
							_this.getMapAddress()
					    }
					});
				}, 100);
			},
			Jumpoutpatient(type){
				if(this.loginState){
					uni.navigateTo({
						url:'outpatientServer?type='+type
					})
				}else{
					uni.navigateTo({
						url:"../mine/author"
					})
				}
				
				
			},
			nextPage() {
				// let _this = this
				console.log("====出发底部===")
				console.log("====出发底部===" + this.pageNum)
				console.log("====出发底部===" + this.hasNextPage)
				if (this.hasNextPage) {
					this.pageNum = this.pageNum + 1
					this.$api.gethospitallist({
						longitude:this.longitude,
						latitude:this.latitude,
						city:this.city,
						type:4
					}, this.pageNum, this.pageSize).then((res) => {
						if (res.data.code == 200) {
							for (var i = 0; i < res.data.dataMap.list.length; i++) {
								this.gethospitallist.push(res.data.dataMap.list[i])
							}
							this.hasNextPage = res.data.dataMap.hasNextPage
			
						}
					})
				}
			
			},
			hospitallist(){
				this.$api.gethospitallist({
					longitude:this.longitude,
					latitude:this.latitude,
					city:this.city,
					type:4
				},this.pageNum,this.pageSize).then((res) => {
					if(res.data.code=200){
						console.log(res.data.dataMap)
						this.gethospitallist = res.data.dataMap.list
						this.hasNextPage = res.data.dataMap.hasNextPage
						this.isNull = this.gethospitallist.length < 1 ? true : false
						console.log(this.hasNextPage)
						
					}
							
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.order_null {
		display: flex;
		width: 100%;
		flex-direction: column;
	}
	
	.order_null text {
		margin: 0 auto;
		margin-top: 20rpx;
		color: #666666;
		font-size: 28rpx;
	}
	
	.order_null image {
		margin: 0 auto;
		margin-top: 160rpx;
		width: 442rpx;
		height: 458rpx;
	}
	.content{
		padding: 30rpx;
	}
	.header-left{
		.header-image{
			width: 24rpx;
			height: 31rpx;
		}
		view{
			font-size: 26rpx;
		}
	}
	.header-right{
		width: 550rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background: #F2F7FF;
		image{
			width: 30rpx;
			height: 30rpx;
		}
		view{
			font-size: 28rpx;
			font-weight: 500;
			color: #999999;
		}
	}
	.swiper{
		  margin-top:30rpx;
		  height: 240rpx;
		  
		  .swiper-item{
			  width:100%;
			  height:240rpx;
			  border-radius: 20rpx;
			  background-size: 100% 100%!important;
			  background-repeat: no-repeat;
			  
		  }
	}
	.server{
		width: 600rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		height: 134rpx;
		.server-list{
			text-align: center;
			image{
				width: 90rpx;
				height: 90rpx;
			}
			view{
				font-size: 26rpx;
				font-weight: 500;
				color: #333333;
			}
		}
	}
	.doc-header{
		view:nth-child(1){
			font-size: 36rpx;
			font-weight: bold;
			color: #333333;
		}
		view:nth-child(2){
			width: 100rpx;
			height: 42rpx;
			background: #FFFFFF;
			border: 2rpx solid #999999;
			border-radius: 21rpx;
			font-size: 26rpx;
			font-weight: 500;
			color: #666666;
			text-align: center;
			line-height: 42rpx;
		}
	}
	.doc-list{
		margin-top: 20rpx;
		image{
			width: 130rpx;
			height: 130rpx;
			margin-right: 5rpx;
		}
		.list-right{
			view:nth-child(1){
				width: 538rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				overflow:hidden; //超出的文本隐藏
				text-overflow:ellipsis; //溢出用省略号显示
				white-space:nowrap; //溢出不换行
			}
			view:nth-child(2){
				width: 538rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #666666;
				overflow:hidden; //超出的文本隐藏
				text-overflow:ellipsis; //溢出用省略号显示
				white-space:nowrap; //溢出不换行
			}
			view:nth-child(3){
				font-size: 26rpx;
				font-weight: 500;
				color: #666666;
				.public{
					width: 120rpx;
					height: 40rpx;
					background: #F2F7FF;
					border-radius: 4rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #4CA8FD;
					line-height: 40rpx;
					text-align: center;
				}
				.private{
					text-align: center;
					line-height: 40rpx;
					width: 120rpx;
					height: 40rpx;
					background: #FFECE0;
					border-radius: 4rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #FF8338;
				}
			}
		}
	}
	.popup-header{
		height: 100rpx;
		padding: 0 30rpx 0 30rpx;
		view{
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}
		image{
			width: 48rpx;
			height: 48rpx;
		}
	}
		.typelist{
			width: 360rpx;
			height: 80rpx;
			background: #FFECE0;
			border-radius: 40rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			image{
				width: 36rpx;
				height: 36rpx;
			}
			view{
				font-size: 28rpx;
				font-weight: bold;
				color: #FF8338;
			}
		}
</style>
